import { Button, Space, Form, Input, Spin, message, Select } from 'antd';
import { useRef, useState, useEffect } from 'react';
import { history } from 'umi';
import { getCateAPI } from '@/server/cake';
import ImgUpLoad from '@/components/imgUpLoad';
import RichEditor from '../../components/RichEditor';

// 获取分类列表
const pub = () => {
  const form = useRef();
  const [isLoad, setIsLoad] = useState(false);
  // 请求分类列表
  const [cateList, setCateList] = useState([]);
  useEffect(async () => {
    const res = await getCateAPI();
    setCateList(
      res.results.map((v) => {
        return {
          value: v.objectId,
          label: v.catename,
        };
      }),
    );
  }, []);
  const onFinish = async (values) => {
    // setIsLoad(true);
    console.log(values);
    // await addBannerAPI(values);
    // setIsLoad(false);
    // 重置表单
    // form.current.resetFields();
    // 成功弹框
    // message.success('添加成功！');
    // 跳转列表页面
    // history.push('/goods/list');
  };
  return (
    <Spin tip="加载中..." size="large" spinning={isLoad}>
      <Form
        name="basic"
        ref={form}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 14,
        }}
        style={{
          maxWidth: 950,
        }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="商品名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入名称',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="分类选择"
          name="cateId"
          rules={[
            {
              required: true,
              message: '请选择分类',
            },
          ]}
        >
          <Select placeholder="请选择分类" options={cateList} />
        </Form.Item>
        <Form.Item
          label="商品详细"
          name="detail"
          rules={[
            {
              required: true,
              message: '请输入内容',
            },
          ]}
        >
          {/* 富文本编辑器 */}
          <RichEditor />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Space size="middle">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => form.current.resetFields()}
            >
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Spin>
  );
};
export default pub;
